<template>
  <div>
    <el-row :gutter="20" style="display: flex">
      <el-col :span="6" style="flex-shrink: 0;">
        <el-card class="box-card" style="height: 99%; display: flex; align-items: center; justify-content: center" @click.native="add_modal_show">
          <div style="width: 100%; display: flex; flex-direction: column; align-items: center;">
            <i class="el-icon-circle-plus-outline" style="font-size: 45px; color: rgba(0,0,0,0.25);"></i>
            <p style="color: rgba(0,0,0,0.25)">添加新地址</p>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6" v-for="(contact,index) in contacts" :key="contact" style="flex-shrink: 0">
        <el-card class="box-card" @click.native="cardClick(contact, index)" :class="{ 'box-card-selected': (index===currentSelectedIndex) }">
          <div slot="header" class="clearfix" >
            <span class="form-tips">{{contact['contactname']}}</span>
            <i class="el-icon-edit icon-button" @click="edit_modal_show(index)"></i>
            <i class="el-icon-delete icon-button" @click="delete_contact(contact)"></i>
          </div>
          <div class="text item">
            <i class="el-icon-mobile-phone text-icon"></i>{{contact['phone']}}
          </div>
          <div class="text item">
            <i class="el-icon-location text-icon" ></i>{{contact['address']}}
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-dialog class="dialog-modal" title="修改地址" :visible.sync="editFormVisible" width="25%">
      <el-form :model="form">
        <el-form-item label="联系人" class="form-item">
          <el-input v-model="form.contactname" prefix-icon="el-icon-arrow-right" type="text"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" class="form-item">
          <el-input v-model="form.phone" prefix-icon="el-icon-arrow-right" type="text"></el-input>
        </el-form-item>
        <el-form-item label="联系地址" class="form-item">
          <el-input v-model="form.address" prefix-icon="el-icon-arrow-right" type="text"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="update_contact(form)">修 改</el-button>
      </div>
    </el-dialog>
    <el-dialog class="dialog-modal" title="添加地址" :visible.sync="addFormVisible" width="25%">
      <el-form :model="form">
        <el-form-item label="联系人" class="form-item">
          <el-input v-model="form.contactname" prefix-icon="el-icon-arrow-right" type="text"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" class="form-item">
          <el-input v-model="form.phone" prefix-icon="el-icon-arrow-right" type="text"></el-input>
        </el-form-item>
        <el-form-item label="联系地址" class="form-item">
          <el-input v-model="form.address" prefix-icon="el-icon-arrow-right" type="text"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="add_contact(form)">提 交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Contact',
  props: {
    disable: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      that: this,
      form: {
      },
      contacts: [],
      editFormVisible: false,
      addFormVisible: false,
      currentSelectedIndex: -1
    }
  },
  created () {
    this.$customerAPI.contact().then((params) => {
      this.contacts = params.data
      if (this.contacts.length > 0) {
        if (this.$props.disable === false) {
          this.currentSelectedIndex = 0
        }
        this.$emit('choose', this.contacts[0])
      }
    })
  },
  methods: {
    edit_modal_show (index) {
      this.editFormVisible = true
      this.form = this.contacts[index]
    },
    add_modal_show () {
      this.addFormVisible = true
      this.form = {}
    },
    add_contact (form) {
      this.$customerAPI.contact_add(form).then((params) => {
        if (params['code'] === 200) {
          this.$message({
            message: '地址添加成功',
            type: 'success'
          })
          this.addFormVisible = false
          this.form = {}
          this.contacts.push(params['data'])
          this.$emit('choose', params['data'])
          if (this.$props.disable === false) {
            this.currentSelectedIndex = this.contacts.indexOf(params['data'])
          }
        } else {
          this.$message.error('添加地址出错了!')
        }
      })
    },
    cardClick (contact, index) {
      console.log(this.$props)
      if (this.$props.disable === false) {
        this.currentSelectedIndex = index
      }
      this.$emit('choose', contact)
    },
    update_contact (form) {
      console.log(form)
      this.$customerAPI.contact_update(form).then((params) => {
        this.$message({
          message: '地址修改成功',
          type: 'success'
        })
        this.editFormVisible = false
      })
    },
    delete_contact (contact) {
      this.$confirm('确定删除该地址?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$customerAPI.contact_delete(contact['id']).then((params) => {
          this.contacts.splice(this.contacts.indexOf(contact), 1)
          if (this.contacts.length > 0) {
            if (this.$props.disable === false) {
              this.currentSelectedIndex = this.contacts.length - 1
            }
            this.$emit('choose', this.contacts[this.currentSelectedIndex])
          } else {
            this.currentSelectedIndex = -1
            this.$emit('choose', null)
          }
          this.$message({
            message: '地址删除成功',
            type: 'success'
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style scoped>
  * {
    transition: all .15s ease-in-out;
  }
  .text {
    font-size: 14px;
  }

  .item {
    padding: 18px 0;
  }

  .box-card {
    cursor: pointer;
    position: relative;
    top: 0;
  }
  .box-card:hover {
    top: -6px;
  }
  .box-card-selected {
    border: 5px solid #ddd;
    border-image: -webkit-linear-gradient(#37ecba, #72afd3) 30 30;
    border-image: -moz-linear-gradient(#37ecba, #72afd3) 30 30;
    border-image: linear-gradient(#37ecba, #72afd3) 30 30;
  }
  .icon-button {
    cursor: pointer;
    float: right;
    margin-left: 20px;
    padding: 3px 0
  }
  .icon-button:hover {
    font-size: 1.5em;
  }
  .text-icon{
    margin-right: 10px
  }
  .form-tips{
    font-size: 17px;
    margin-left: 10px;
    letter-spacing: 3px;
    color: rgba(0, 0, 0, 0.36);
  }
</style>
